import React, { useState, useEffect } from 'react';
import { Input, Table, Pagination } from 'antd';
import { SearchOutlined } from '@ant-design/icons';
import { searchProductForOutId, returnOutProductListData, getOutProductLength } from '@/api/product/index';
import dayjs from 'dayjs';

const ProductOutList = () => {
  const [productOutId, setProductOutId] = useState('');
  const [tableData, setTableData] = useState([]);
  const [paginationData, setPaginationData] = useState({
    pageCount: 1,
    currentPage: 1,
  });
  const [outProductTotal, setOutProductTotal] = useState(0);

  // 获取出库产品总数
  const getOutProductListLength = async () => {
    const res = await getOutProductLength();
    setOutProductTotal(res.length);
    setPaginationData((prev) => ({
      ...prev,
      pageCount: Math.ceil(res.length / 10),
    }));
  };

  // 获取第一页的数据
  const getFirstPageList = async () => {
    const data = await returnOutProductListData(1);
    setTableData(data);
  };

  // 监听分页切换
  const currentChange = async (page) => {
    setPaginationData((prev) => ({
      ...prev,
      currentPage: page,
    }));
    const data = await returnOutProductListData(page);
    setTableData(data);
  };

  // 搜索：通过出库编号搜索产品
  const searchProductOutId = async () => {
    const data = await searchProductForOutId(productOutId);
    setTableData(data);
  };

  useEffect(() => {
    getOutProductListLength();
    getFirstPageList();
  }, []);

  return (
    <div className="table-wrapped">
      <div className="table-top">
        <div className="table-header">
          <div style={{ width: 300, marginBottom: 20 }}>
            <Input
              value={productOutId}
              onChange={(e) => setProductOutId(e.target.value)}
              size="large"
              placeholder="输入出库编号进行搜索"
              prefix={<SearchOutlined />}
              onPressEnter={searchProductOutId}
              allowClear
            />
          </div>
        </div>
        <div className="table-content">
          <Table
            dataSource={tableData}
            rowKey="id"
            bordered
            pagination={false}
            columns={[
              { title: '出库编号', dataIndex: 'product_out_id', width: 200 },
              { title: '申请数量', dataIndex: 'product_out_number', width: 200 },
              { title: '申请出库总价', dataIndex: 'product_out_price', width: 200 },
              { title: '出库申请人', dataIndex: 'product_out_apply_person', width: 200 },
              {
                title: '申请出库时间', dataIndex: 'product_apply_time', width: 200,
                render: (text) => <div>{text ? dayjs(text).format('YYYY-MM-DD HH:mm:ss') : ''}</div>,
              },
              { title: '审核人', dataIndex: 'product_out_audit_person' },
              {
                title: '审核时间', dataIndex: 'product_audit_time', width: 200,
                render: (text) => <div>{text ? dayjs(text).format('YYYY-MM-DD HH:mm:ss') : ''}</div>,
              },
              { title: '审核备注', dataIndex: 'audit_memo', width: 200 },
            ]}
          />
        </div>
      </div>
      <div style={{
        display: 'flex',
        justifyContent: 'flex-end',
        marginTop: 20,
      }}>
        <Pagination
          pageSize={10}
          current={paginationData.currentPage}
          total={outProductTotal}
          pageSizeOptions={[10, 20, 50, 100]}
          onChange={currentChange}
          showQuickJumper
          showSizeChanger={false}
        />
      </div>
    </div>
  );
};

export default ProductOutList;
